<style>
	/*在修改的表单项上才显示错误信息*/
	input.ng-dirty.ng-invalid {
		border: 1px solid red;
	}
</style>
<ion-view>
	<ion-content>
		<div class="content no-header ionic-pseudo">
			<form name="theForm" novalidate="novalidate">
				<div class="list card">
					<div class="item item-avatar">
						<img src="/Public/images/wkshop-logo.jpeg">
						<h2>【汪卡在线】---- 创建店铺申请</h2>
						<p>创建新的店铺申请</p>
					</div>
					<div class="item">
						<div class="list">
							<label class="item item-input">
								<span class="input-label">商铺名称：</span>
								<input type="text" name="title" placeholder="请输入商铺名称" ng-model="formData.title" required>
							</label>
							<label class="item item-input">
								<span class="input-label">老板姓名：</span>
								<input type="text" name="user_name" placeholder="请输入老板真实姓名" ng-model="formData.user_name" required>
							</label>
							<label class="item item-input">
								<span class="input-label">身份证号码：</span>
								<input type="tel" name="cert_id" placeholder="请输入老板的身份证号码" ng-model="formData.cert_id" required>
							</label>
							<label class="item item-input">
								<span class="input-label">手机号码：</span>
								<input type="tel" placeholder="请输入手机号码" name="user_mobile"
								       ng-model="formData.user_mobile" ng-pattern="/^1[1|3|4|5|7|8][0-9]\d{8}$/" required>
							</label>
							<label class="item item-input">
								<span class="input-label">发送验证码：</span>
								<button class="button button-small button-dark" button-widget="sms" ac="createShop"
								        mobile="{{formData.user_mobile}}" forms="formData" ng-disabled="theForm.user_mobile.$invalid">
									立即发送短信验证码
								</button>
							</label>
							<label class="item item-input">
								<span class="input-label">短信验证码：</span>
								<input type="tel" name="sms_code" placeholder="输入短信验证码" ng-model="formData.sms_code" required>
							</label>
							<div class="item item-input item-select">
								<div class="input-label">行业分类：</div>
								<select name="cid" ng-model="formData.cid" required
								        ng-options="cat.title group by cat.main for cat in category track by cat.id">
									<option selected value="">请选择店铺行业分类</option>
								</select>
							</div>
							<div class="item item-input item-select">
								<div class="input-label">所属校区：</div>
								<select name="area" ng-model="formData.area" required>
									<option value="" selected>请选择店铺所属校区</option>
									<option value="yl">杨林校区</option>
									<option value="al">安宁校区</option>
									<option value="cg">呈贡校区</option>
								</select>
							</div>
							<label class="item item-input">
								<span class="input-label">商铺电话：</span>
								<input type="tel" name="telphone" placeholder="请输入商铺电话" ng-model="formData.telphone">
							</label>
							<label class="item item-input">
								<span class="input-label">详细地址：</span>
								<input type="text" name="suite" placeholder="请输入详细地址" ng-model="formData.suite" required>
							</label>
							<label class="item item-input">
								<span class="input-label">老板密码：</span>
								<input type="text" name="boos_password" placeholder="请输入老板密码" ng-model="formData.bossPassword" required>
							</label>
							<label class="item item-input">
								<span class="input-label">收银员密码：</span>
								<input type="text" name="preson_password" placeholder="请输入收银员密码" ng-model="formData.personPassword" required>
							</label>
						</div>
					</div>
					<div class="row" ng-show="!theForm.$valid" ng-hide="theForm.$valid">
						<div class="col">
							<div class="card">
								<div class="item item-divider">
									店铺创建表单错误提示
								</div>
								<ul class="item item-text-wrap">
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.title.$invalid">商铺名称填写不正确</li>
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.mobile.$invalid">手机号码填写不正确</li>
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.mobile.$invalid">短信验证码填写不正确</li>
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.mobile.$invalid">行业分类选择不正确</li>
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.mobile.$invalid">所属校区选择不正确</li>
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.mobile.$invalid">详细地址填写不正确</li>
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.mobile.$invalid">老板密码填写不正确</li>
									<li class="item assertive ion-ios-close" ng-show="theForm.$dirty && theForm.mobile.$invalid">收银员密码填写不正确</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-40">
							<button class="button button-small button-balanced button-block button-positive" ng-click="submit()" ng-disabled="!theForm.$valid">创建店铺</button>
						</div>
						<div class="col-20"></div>
						<div class="col-40">
							<button class="button button-small button-assertive button-block button-positive" type="reset">重置申请</button>
						</div>
					</div>
				</div>
			</form>
		</div>
		<div style="height: 1px;"></div>
	</ion-content>
</ion-view>